<template>
  <div style="padding: 40px;height: 100%">
    <step-line :stepnow=stepnow :stepmsg=stepmsg></step-line>
    <div class="step_box_card">
      <div v-show="stepnow === 1">
        <h5 class="lit_title"><img src="/img/step/sb_icon1.png"><span>受理条件</span></h5>
        <p v-for="(item,index) in admissibilityconditions" :key="index" class="normal_p">
          {{index+1}}:{{item}}
        </p>
        <div class="lit_bar"></div>
        <h5 class="lit_title"><img src="/img/step/sb_icon2.png"><span>受理情形</span></h5>

        <div v-for="(item,index) in questlist" :key="index">
            <p class="normal_p"  style="margin-bottom: 0">{{index+1}}.{{item.name}}</p>
            <p class="normal_p">
              <el-radio
                v-for="(ansitem,ansindex) in item.ans"
                :key="ansindex" v-model="redioList[index].aw"
                :label="ansitem.name"
                @change="chg(ansitem,index)">
                {{ansitem.name}}
              </el-radio>
            </p>
        </div>

        <p class="normal_p"  style="color: red">{{Tsmsg}}</p>
      </div>
      <div v-show="stepnow === 2">
        <h5 class="lit_title"><img src="/img/step/sb_icon3.png"><span>基本信息</span></h5>
      </div>
      <div v-show="stepnow === 3">
        <div class="sccl_title">
          <h5 class="lit_title"><img src="/img/step/sb_icon4.png"><span>上传材料</span></h5>
          <div class="sccl_icon_group">
            <div class="sccl_icon">
              <img src="/img/step/must.png"><span style="color:#e3a900">必要件</span>
            </div>
            <div class="sccl_icon">
              <img src="/img/step/pape.png"><span style="color:#04bd8f">纸质材料</span>
            </div>
            <div class="sccl_icon">
              <img src="/img/step/doc.png"><span style="color:#0367fd">电子件</span>
            </div>
            <div class="sccl_icon">
              <img src="/img/step/self.png"><span style="color:#3ebdff">申请人自备</span>
            </div>
            <div class="sccl_icon">
              <img src="/img/step/issu.png"><span style="color:#3ebdff">政府部门核发</span>
            </div>
            <div class="sccl_icon">
              <img src="/img/step/promise.png"><span style="color:#7394ff">告知承诺(材料)</span>
            </div>
          </div>
        </div>
        <div class="file_box" v-for="(item,index) in fileList" :key="index">
          <div class="file_item">
            <div class="file_content">
              <div class="file_name">
                <el-tooltip :content="item.name" placement="bottom-end" effect="light">
                  <p><span class="file_free" v-if="item.Free">
                    【已关联电子{{item.Free}}，可免提交】
                  </span>{{item.name}}</p>
                </el-tooltip>
                <div class="file_icon icon_must" v-if="item.Required"></div>
                <div class="file_icon icon_pape" v-if="item.MaterialFormat.includes('纸质')"></div>
                <div class="file_icon icon_doc"  v-if="item.MaterialFormat.includes('电子')"></div>
                <div class="file_icon"  :class="[item.MaterialSource === '申请人自备' ? 'icon_self' : 'icon_issu']"></div>
                <div class="file_icon icon_promise" v-if="item.Promise"></div>
              </div>
              <p class="file_point" v-if="item.point">审查要点：{{item.point}}</p>
            </div>
            <div class="file_choose_box">
              <el-select v-model="item.MaterialGetType" placeholder="收取方式">
                <el-option v-for="item in GetTypeDicDate"  :label="item.type" :value="item.code" :key="item.code"></el-option>
              </el-select>
              <el-select v-model="item.MaterialGetState" placeholder="收取状态">
                <el-option v-for="item in GetStateDicDate"  :label="item.type" :value="item.code" :key="item.code"></el-option>
              </el-select>
            </div>
            <div class="file_btn_box">
              <el-tooltip content="文件上传" placement="bottom" effect="light">
                <div class="file_content_btn btn_upload"></div>
              </el-tooltip>
              <el-tooltip content="电子材料" placement="bottom" effect="light">
                <div class="file_content_btn btn_elec"></div>
              </el-tooltip>
              <el-tooltip content="电子证照共享" placement="bottom" effect="light">
               <div class="file_content_btn btn_share"></div>
              </el-tooltip>
              <el-tooltip content="高拍仪获取" placement="bottom" effect="light">
               <div class="file_content_btn btn_shot"></div>
              </el-tooltip>
            </div>
          </div>
          <div class="file_upload_list" v-if="item.fileSpace[0]">
            <div class="file_upload_listitem" v-for="(upitem,upindex) in item.fileSpace" :key="upindex">
              <p>{{upitem.name}}<span>{{upitem.type}}</span></p>
              <div class="file_upload_btn_box">
                <el-tooltip content="下载" placement="bottom" effect="light">
                  <div class="file_upload_btn"><i class="el-icon-download"></i></div>
                </el-tooltip>
                <el-tooltip content="预览" placement="bottom" effect="light">
                 <div class="file_upload_btn"><i class="el-icon-view"></i></div>
                </el-tooltip>
                <el-tooltip content="删除" placement="bottom" effect="light">
                 <div class="file_upload_btn"><i class="el-icon-delete"></i></div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="stepnow === 4">
        <div class="suc_box">
          <div class="suc_icon">
            <i class="el-icon-check"></i>
          </div>
          <p class="suc_title">登记完成</p>
          <table class="show_table" style="width: 50%" >
            <tr><th>办件编号</th><td>{{serverMsg.code}}</td></tr>
            <tr><th>办事申请人</th><td>{{serverMsg.name}}</td></tr>
            <tr><th>联系电话</th><td>{{serverMsg.phoneNum}}</td></tr>
            <tr><th>办事周期</th><td>{{serverMsg.endTime}}</td></tr>
          </table>
        </div>
      </div>
    </div>
    <div class="foot_button_group">
      <el-button v-show="stepnow > 1 && stepnow < 4" @click="ToPorp()">上一步</el-button>
      <el-button type="primary" :disabled="!NextStep" v-show="stepnow < 4" @click="ToNext()">下一步</el-button>
      <el-button type="primary" v-show="stepnow == 4" @click="Close()">关闭</el-button>
    </div>
  </div>
</template>

<script>
import stepLine from "./stepLine";

export default {
  name: "RegistrationProcess",
  data(){
    return{
      stepmsg: ['情形引导','填写信息','上传材料','登记完成'],
      stepnow: 1,
      admissibilityconditions:['《护士条例》第八条：收到申请的卫生主管部门应当自收到申请之日起20个工作日内做出决定，对具备本条例规定条件的，准予注册，并发给护士执业证书;对不具备本条例规定条件的，不予注册，并书面说明理由。','《护士执业注册管理办法》第十条：卫生健康主管部门应当自受理申请之日起20个工作日内，对申请人提交的材料进行审核、注册，发给国家卫生健康委统一印制的《护士执业证书》；对不符合规定条件的，不予注册，并书面说明理由。'],
      NextStep: false,
      questlist:[
        {
          name:'是否考过资格证注册',
          code:'1001',
          ans:[
            {
              name:'是',
              toqust:'是否注册后超过3年',
              msg:'',
              HappyEnd:false,
            },{
              name:'否',
              toqust:'',
              msg:'不予办理此事项，请先进行培训考试',
              HappyEnd:false,
            }
          ]
        },
      ],
      redioList:[
        {
          aq:'',
          aw:''
        }
      ],
      servlist:[],
      Tsmsg:'',
      show: false,
      fileList:[
        {
          name:'填写外国人签证证件申请表，交一张符合《出入境证件相片照相指引》标准的照片',
          point:'1.需仔细核对提交照片与本人是否一致；2.核查签证序列号是否准确；3.核查近期核酸检测报告结果',
          Free: false,
          Required: true,
          MaterialFormat: '纸质',
          MaterialSource: '申请人自备',
          Promise: false,
          MaterialGetType:'',
          MaterialGetState:'',
          fileSpace:[],
        },
        {
          name:'提交护照报失证明或者所属国驻华使领馆照会或者出示被损毁、失效证件以及替',
          point:'',
          Free: '材料',
          Required: true,
          MaterialFormat: '电子',
          MaterialSource: '政府部门核发',
          Promise: true,
          MaterialGetType:'',
          MaterialGetState:'',
          fileSpace:[],
        },
        {
          name:'其他与签发事由相关的证明材料',
          point:'',
          Free: '证照',
          Required: false,
          MaterialFormat: '纸质、电子',
          MaterialSource: '申请人自备',
          Promise: true,
          MaterialGetType:'',
          MaterialGetState:'',
          fileSpace:[
            {
              name:'2021-08-08日核酸检测报告.pdf',
              type:'上传电子文件',
              url:''
            },{
              name:'甘肃省兰州市城关区派出所出示居住证明.jpg',
              type:'高拍仪上传',
              url:''
            },
          ],
        },
      ],
      GetTypeDicDate:[
        {
          type:'收取纸质材料',
          code:'1',
        },
        {
          type:'上传电子文件',
          code:'2',
        },
        {
          type:'证照库引用',
          code:'3',
        },
        {
          type:'告知承诺书形式',
          code:'4',
        },
        {
          type:'窗口提交',
          code:'5',
        },
      ],
      GetStateDicDate:[
        {
          type:'未收取',
          code:'1'
        },
        {
          type:'已收取',
          code:'2'
        },
        {
          type:'材料容缺',
          code:'3'
        },{
          type:'补齐补正',
          code:'4'
        },

      ],
      serverMsg:{
        code:'45563206514496526161',
        name:'王建国',
        phoneNum:'15955653254',
        endTime:'三个工作日'
      }
    }
  },
  methods:{
    chg(item,index){
      const question2 = {
        name:'是否注册后超过3年',
        code:'1002',
        ans:[
          {
            name:'是',
            toqust:'',
            msg:'不予办理此事项，请先进行培训考试',
            HappyEnd:false,
          },{
            name:'否',
            toqust:'',
            msg:'',
            HappyEnd:true
          }
        ]
      };
      const radioSpace = {aq:'',
        aw:''}
      this.Tsmsg = item.msg;
      if(item.HappyEnd === true){
        this.NextStep = true;
        return false;
      }else{
        this.NextStep = false;
        if(!item.toqust == ''){
          this.redioList.push(radioSpace)
          this.questlist.push(question2);
        }else {
          this.questlist = this.questlist.slice(0,index+1);
          this.redioList = this.redioList.slice(0,index+1);
        }
      }
    },
    ToNext(){
      if (this.stepnow < 4){
        this.stepnow ++;
      }else {
        return false
      }
    },
    Close(){
      this.stepnow = 1
    },
    ToPorp(){
      this.stepnow --;
    },

  },
  mounted() {

  },
  components:{
    stepLine,
  }
}


import "@/styles/set.scss"
// import "@/styles/form.scss"

</script>

<style scoped>
*{
  margin-block-start: 0;
  margin-block-end: 0;
}
.step_box_card{
  background: #fff;
  height: calc(100% - 170px);
  margin-top: 40px;
  box-shadow: 0px 5px 5px rgba(0,0,0,.1);
  border-radius: 10px;
  overflow-y: hidden;
  box-sizing: border-box;
  padding: 35px;
}
.step_box_card>div{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.lit_title{
  margin-bottom: 15px;
}
.lit_title img{
  vertical-align: middle;
}
.lit_title span{
  color: #4ca3ed;
  font-size: 22px;
  vertical-align: middle;
  margin-left: 10px;
}
.normal_p{
  font-size: 18px;
  line-height: 1.8;
  width: 90%;
  margin: 0 auto 18px auto;
}
.lit_bar{
  border-bottom: 1px dashed #e5e5e5;
  margin: 30px 0;
}
.foot_button_group{
  text-align: center;
  margin-top:30px;
}
.foot_button_group button{
  font-size: 20px;
  padding: 17px 34px;
}
.sccl_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sccl_title .sccl_icon_group{
  display: flex;
  flex: 1;
  justify-content: flex-end;
}
.sccl_title .sccl_icon_group img{
  margin-right: 5px;
}
.sccl_title .sccl_icon_group span{
  margin-right: 15px;
}
.sccl_title .sccl_icon_group img,.sccl_title .sccl_icon_group span{
  vertical-align: middle;
}
.sccl_title .sccl_icon_group .sccl_icon:last-child span{
  margin-right: 0;
}

.file_box{
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: 0 5px 5px rgba(0,0,0,.05);
}
.file_box .file_item{
  display: flex;
  min-height: 100px;
}
.file_box .file_item .file_content{
  width: 60%;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 26px;
  border-right: 1px solid #e5e5e5;
}
.file_box .file_item .file_content .file_name{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.file_box .file_item .file_content .file_point{
  color: #4ca3ed;
  margin-top: 8px;
}
.file_box .file_item .file_content .file_name .file_free{
  color: #ff932a;
}
.file_box .file_item .file_content .file_name>p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}
.file_box .file_item .file_content .file_name .file_icon{
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0 4px;
}
.file_box .file_item .file_content .file_name .file_icon.icon_must{
  background: url("/img/step/must.png");
}
.file_box .file_item .file_content .file_name .file_icon.icon_pape{
  background: url("/img/step/pape.png");
}
.file_box .file_item .file_content .file_name .file_icon.icon_doc{
  background: url("/img/step/doc.png");
}
.file_box .file_item .file_content .file_name .file_icon.icon_issu{
  background: url("/img/step/issu.png");
}
.file_box .file_item .file_content .file_name .file_icon.icon_self{
  background: url("/img/step/self.png");
}
.file_box .file_item .file_content .file_name .file_icon.icon_promise{
  background: url("/img/step/promise.png");
}
.file_box .file_item .file_choose_box{
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #e5e5e5;
}

.file_box .file_item .file_choose_box /deep/ .el-input__inner {
  width: 88%;
  margin: 0 auto;
  display: block;
  border-radius: 50px;
  height: 44px;
}
.file_box .file_item .file_choose_box /deep/ .el-input__suffix {
  right: 13px;
}

.file_box .file_item .file_choose_box /deep/ .el-input__inner::-webkit-input-placeholder{
  color:#4ca3ed;
}
.file_box .file_item .file_choose_box /deep/ .el-input__inner::-moz-placeholder{   /* Mozilla Firefox 19+ */
  color:#4ca3ed;
}
.file_box .file_item .file_choose_box /deep/ .el-input__inner:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
  color:#4ca3ed;
}
.file_box .file_item .file_choose_box /deep/ .el-input__inner:-ms-input-placeholder{  /* Internet Explorer 10-11 */
  color:#4ca3ed;
}
.file_box .file_item .file_btn_box{
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  box-sizing: border-box;
  align-items: center;
}
.file_box .file_item .file_btn_box .file_content_btn{
  width: 25px;
  height: 25px;
  background-position: center center;
  background-repeat: no-repeat;
  margin-left: 20px;
  cursor: pointer;
}
.file_box .file_item .file_btn_box .file_content_btn.btn_upload{
  background-image: url("/img/step/upload.png");
}
.file_box .file_item .file_btn_box .file_content_btn.btn_elec{
  background-image: url("/img/step/elec.png");
}
.file_box .file_item .file_btn_box .file_content_btn.btn_share{
  background-image: url("/img/step/share.png");
}
.file_box .file_item .file_btn_box .file_content_btn.btn_shot{
  background-image: url("/img/step/shot.png");
}


.file_upload_list{
  width: calc(100% - 50px);
  box-sizing: border-box;
  margin: 0 20px 0 30px;
  border-top: 1px solid #e5e5e5;
}
.file_upload_list .file_upload_listitem{
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
}
.file_upload_list .file_upload_listitem:last-child{
  border-bottom: none;
}
.file_upload_list .file_upload_listitem .file_upload_btn{
  cursor: pointer;
  font-size: 20px;
  margin-left: 25px;
  color: #4ca3ed;
}
.file_upload_list .file_upload_btn_box {
  display: flex;
  align-items: center;

}
.file_upload_list .file_upload_listitem>p{

}
.file_upload_list .file_upload_listitem>p>span{
  font-size: .8em;
  background: #4ca3ed;
  color: #fff;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 13px;
  margin-left: 10px;
}

.suc_box{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.suc_box .suc_icon{
  color: #fff;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background: #4ca3ed;
  border-radius: 100px;
  font-size: 48px;
  margin-bottom: 14px;
}
.suc_box .suc_title{
  font-size: 42px;
  margin-bottom: 35px;

}
</style>
